<html lang="en"></html>
<head>
  <meta charset="UTF-8" />
  <meta name="renderer" content="webkit" />
  <meta name="force-rendering" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Plan | 制定计划 执行计划</title>
  <meta name="keywords" content="JavaScript,Todo,Plan.js" />
  <meta name="description" content="Plan | 制定计划 执行计划" />
  <meta name="twitter:description" content="JavaScript,Todo,Plan.js" />
  <link href="css/app.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="plan" id="plan">
    <div class="side" id="side">
      <h1 class="logo"><i class="icon-clipboard"></i></h1>
      <div class="toolbar" id="toolbar">
        <div class="toolbar-button toolbar-plus"><i class="icon-plus"></i></div>
        <div class="toolbar-filters">
          <div class="toolbar-inner">
            <div class="toolbar-button toolbar-inbox toolbar-active" data-filter="inbox"><i class="icon-inbox-full"></i></div>
            <div class="toolbar-button toolbar-spades" data-filter="spades"><i class="icon-spades"></i></div>
            <div class="toolbar-button toolbar-heart" data-filter="heart"><i class="icon-heart"></i></div>
            <div class="toolbar-button toolbar-clubs" data-filter="clubs"><i class="icon-clubs"></i></div>
            <div class="toolbar-button toolbar-diamonds" data-filter="diamonds"><i class="icon-diamonds"></i></div>
            <div class="toolbar-button toolbar-bookmark" data-filter="marked"><i class="icon-bookmark"></i></div>
          </div>
        </div>
        <div class="toolbar-button toolbar-trash" data-filter="deleted"><i class="icon-bin"></i></div>
        <div class="toolbar-button toolbar-setting"><i class="icon-cog"></i></div>
      </div>
    </div>
    <div class="main" id="main">
      <div class="panel panel-view" id="view-panel">
        <div class="panel-hd">
          <div class="panel-button panel-cancel view-cancel" id="view-cancel"><i class="icon-cheveron-left"></i></div>
          <h2 class="panel-title">任务详情</h2>
          <div class="panel-button panel-modify view-edit" id="view-save"><i class="icon-edit-pencil"></i></div>
        </div>
        <div class="panel-bd">
          <div class="tasks">
            <div class="field"><label class="field-label field-view-label">任务标题：</label>
              <p class="field-view-text" id="view-title"></p>
            </div>
            <div class="field"><label class="field-label field-view-label">创建日期：</label>
              <p class="field-view-text" id="view-create"></p>
            </div>
            <div class="field"><label class="field-label field-view-label">截止日期：</label>
              <p class="field-view-text" id="view-deadline"></p>
            </div>
            <div class="field"><label class="field-label field-view-label">预估工作量：</label>
              <p class="field-view-text" id="view-estimate"></p>
            </div>
            <div class="field"><label class="field-label field-view-label">任务等级：</label>
              <p class="field-view-text" id="view-level"></p>
            </div>
            <div class="field"><label class="field-label">任务描述：</label>
              <div class="field-content field-view-content" id="view-desc"></div>
            </div>
            <div class="field"><label class="field-label">操作日志：</label>
              <div class="field-content field-view-content" id="view-logs"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-add" id="add-panel">
        <div class="panel-hd">
          <div class="panel-button panel-cancel add-cancel" id="add-cancel"><i class="icon-cheveron-left"></i></div>
          <h2 class="panel-title">创建任务</h2>
          <div class="panel-button panel-save add-save" id="add-save"><i class="icon-save-disk"></i></div>
        </div>
        <div class="panel-bd">
          <div class="tasks">
            <div class="field"><label class="field-label">任务标题：</label>
              <div class="field-content">
                <div class="field-input"><input class="field-input-text" id="add-title" type="text" autocomplete="false" placeholder="请输入任务标题" /></div>
              </div>
            </div>
            <div class="field"><label class="field-label field-view-label">创建日期：</label>
              <p class="field-view-text" id="add-create"></p>
            </div>
            <div class="field"><label class="field-label">截止日期：</label>
              <div class="field-content">
                <div class="field-input field-date-input"><input class="field-input-text" id="add-deadline" type="text" readonly="readonly" autocomplete="false" placeholder="请选择截止日期" /></div>
                <div class="field-input-icon add-deadline"><i class="icon-calendar"></i></div>
                <div class="field-calendar" id="add-calendar"></div>
              </div>
            </div>
            <div class="field"><label class="field-label">预估工作量：</label>
              <div class="field-content">
                <div class="field-input field-time-input"><input class="field-input-text" id="add-estimate" type="text" autocomplete="false" placeholder="请输入预估工作量" /></div>
                <div class="field-input-icon add-time-icon"><i class="icon-clock"></i></div>
              </div>
            </div>
            <div class="field"><label class="field-label">任务等级：</label>
              <div class="field-content">
                <div class="field-levels" id="add-levels">
                  <div class="field-option field-level field-level-spades add-level" data-level="0" data-type="add">
                    <div class="field-level-icon"><i class="icon-spades"></i></div>
                    <p class="field-level-text">紧急</p>
                  </div>
                  <div class="field-option field-level field-level-heart add-level" data-level="1" data-type="add">
                    <div class="field-level-icon"><i class="icon-heart"></i></div>
                    <p class="field-level-text">高</p>
                  </div>
                  <div class="field-option field-level field-level-clubs add-level" data-level="2" data-type="add">
                    <div class="field-level-icon"><i class="icon-clubs"></i></div>
                    <p class="field-level-text">中</p>
                  </div>
                  <div class="field-option field-level field-level-diamonds add-level" data-level="3" data-type="add">
                    <div class="field-level-icon"><i class="icon-diamonds"></i></div>
                    <p class="field-level-text">低</p>
                  </div><input id="add-level" type="hidden" value="" />
                </div>
              </div>
            </div>
            <div class="field"><label class="field-label">任务描述（支持 markdown）：</label>
              <div class="field-content">
                <div class="field-textarea"><textarea class="field-textarea-text" id="add-desc" autocomplete="false" rows="4" placeholder="请输入任务标题"></textarea></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-edit" id="edit-panel">
        <div class="panel-hd">
          <div class="panel-button panel-cancel edit-cancel" id="edit-cancel"><i class="icon-cheveron-left"></i></div>
          <h2 class="panel-title">编辑任务</h2>
          <div class="panel-button panel-save edit-save" id="edit-save"><i class="icon-save-disk"></i></div>
        </div>
        <div class="panel-bd">
          <div class="tasks">
            <div class="field"><label class="field-label">任务标题：</label>
              <div class="field-content">
                <div class="field-input"><input class="field-input-text" id="edit-title" type="text" autocomplete="false" placeholder="请输入任务标题" /></div>
              </div>
            </div>
            <div class="field"><label class="field-label field-view-label">创建日期：</label>
              <p class="field-view-text" id="edit-create"></p>
            </div>
            <div class="field"><label class="field-label">截止日期：</label>
              <div class="field-content">
                <div class="field-input field-date-input"><input class="field-input-text" id="edit-deadline" type="text" readonly="readonly" autocomplete="false" placeholder="请选择截止日期" /></div>
                <div class="field-input-icon edit-deadline"><i class="icon-calendar"></i></div>
                <div class="field-calendar" id="edit-calendar"></div>
              </div>
            </div>
            <div class="field"><label class="field-label">预估工作量：</label>
              <div class="field-content">
                <div class="field-input field-time-input"><input class="field-input-text" id="edit-estimate" type="text" autocomplete="false" placeholder="请输入预估工作量" /></div>
                <div class="field-input-icon edit-time-icon"><i class="icon-clock"></i></div>
              </div>
            </div>
            <div class="field"><label class="field-label">任务等级：</label>
              <div class="field-content">
                <div class="field-levels" id="edit-levels">
                  <div class="field-option field-level field-level-spades edit-level" data-level="0" data-type="edit">
                    <div class="field-level-icon"><i class="icon-spades"></i></div>
                    <p class="field-level-text">紧急</p>
                  </div>
                  <div class="field-option field-level field-level-heart edit-level" data-level="1" data-type="edit">
                    <div class="field-level-icon"><i class="icon-heart"></i></div>
                    <p class="field-level-text">高</p>
                  </div>
                  <div class="field-option field-level field-level-clubs edit-level" data-level="2" data-type="edit">
                    <div class="field-level-icon"><i class="icon-clubs"></i></div>
                    <p class="field-level-text">中</p>
                  </div>
                  <div class="field-option field-level field-level-diamonds edit-level" data-level="3" data-type="edit">
                    <div class="field-level-icon"><i class="icon-diamonds"></i></div>
                    <p class="field-level-text">低</p>
                  </div><input id="edit-level" type="hidden" value="" />
                </div>
              </div>
            </div>
            <div class="field"><label class="field-label">任务描述（支持 markdown）：</label>
              <div class="field-content">
                <div class="field-textarea"><textarea class="field-textarea-text" id="edit-desc" autocomplete="false" rows="4" placeholder="请输入任务标题"></textarea></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-trash" id="trash-panel">
        <div class="panel-hd">
          <div class="panel-button panel-cancel trash-cancel" id="trash-cancel"><i class="icon-cheveron-left"></i></div>
          <h2 class="panel-title">回收站（<strong class="panel-count" id="trash-count">0</strong>）</h2>
        </div>
        <div class="panel-bd">
          <div class="tasks" id="tasks-trash" data-status="deleted"></div>
        </div>
      </div>
      <div class="panel panel-setting" id="setting-panel">
        <div class="panel-hd">
          <div class="panel-button panel-cancel setting-cancel" id="setting-cancel"><i class="icon-cheveron-left"></i></div>
          <h2 class="panel-title">设置</h2>
        </div>
        <div class="panel-bd">
          <div class="tasks">
            <div class="field"><label class="field-label">任务模板：</label>
              <div class="field-content" id="setting-templates"></div>
            </div>
            <div class="field"><label class="field-label">主题皮肤：</label>
              <div class="field-content" id="setting-themes"></div>
            </div>
            <div class="field"><label class="field-label field-view-label">本地存储：</label>
              <div class="field-content field-view-text" id="setting-storage"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="columns" id="columns">
        <div class="columns-inner" id="columns-inner">
          <div class="column">
            <div class="column-hd">
              <h2 class="column-title">待处理（<strong class="column-count" id="todo-count">0</strong>）</h2>
              <div class="column-button column-up" data-status="0"><i class="icon-cheveron-up"></i></div>
              <div class="column-button column-down hidden" data-status="0"><i class="icon-cheveron-down"></i></div>
            </div>
            <div class="column-bd">
              <div class="tasks" id="tasks-todo" data-status="0"></div>
            </div>
          </div>
          <div class="column">
            <div class="column-hd">
              <h2 class="column-title">处理中（<strong class="column-count" id="doing-count">0</strong>）</h2>
              <div class="column-button column-up" data-status="1"><i class="icon-cheveron-up"></i></div>
              <div class="column-button column-down hidden" data-status="1"><i class="icon-cheveron-down"></i></div>
            </div>
            <div class="column-bd">
              <div class="tasks" id="tasks-doing" data-status="1"></div>
            </div>
          </div>
          <div class="column">
            <div class="column-hd">
              <h2 class="column-title">待验收（<strong class="column-count" id="checking-count">0</strong>）</h2>
              <div class="column-button column-up" data-status="2"><i class="icon-cheveron-up"></i></div>
              <div class="column-button column-down hidden" data-status="2"><i class="icon-cheveron-down"></i></div>
            </div>
            <div class="column-bd">
              <div class="tasks" id="tasks-checking" data-status="2"></div>
            </div>
          </div>
          <div class="column">
            <div class="column-hd">
              <h2 class="column-title">已完成（<strong class="column-count" id="done-count">0</strong>）</h2>
              <div class="column-button column-up" data-status="3"><i class="icon-cheveron-up"></i></div>
              <div class="column-button column-down hidden" data-status="3"><i class="icon-cheveron-down"></i></div>
            </div>
            <div class="column-bd">
              <div class="tasks" id="tasks-done" data-status="3"></div>
            </div>
          </div>
        </div>
        <div class="columns-overlay" id="columns-overlay"></div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/app.min.js"></script>
</body>